<template>
  <!-- <div>
    获取Dom节点
    <p v-if="showWhat == 'input'">
      username: <input type="text" ref="myRef" />
    </p>
    <p v-if="showWhat == 'link'">
      <a href="https://www.baidu.com" ref="myRef"></a>
      password: <input type="password" />
    </p>
  </div> -->
  <!-- <div>
    <my-list :data='MyList' :page-count='5'></my-list>
  </div> -->
  <!-- <div>
    获取组件实例
    <my-test ref="myTest"></my-test>
    <button @click="handleClick">click</button>
  </div> -->
  <div>
    <login-board></login-board>
  </div>
</template>

<script>
/**
 * ref  reference
 *
 * 引用DOM节点，引用组件实例
 * ref是只读的
 * 获取兄弟组件的方法就可以使用ref
 * $refs本身不是响应式的，所以不要在模板中使用的
 * 不要在计算属性中访问
 * 不要尝试去改变ref，ref提供给你获取dom节点或者组件实例引用
 */
// import MyList from './components/MyList'
// import MyTest from "./components/MyTest";
import LoginBoard from './components/LoginBoard'
export default {
  name: "App",

  components: {
    // MyList,
    // MyTest,
    LoginBoard
  },
  data() {
    return {
      showWhat: "input",
      MyList: [
        {
          id: 1,
          text: "fsdf1",
        },
        {
          id: 2,
          text: "fsdf2",
        },
        {
          id: 3,
          text: "fsdf3",
        },
        {
          id: 4,
          text: "fsdf4",
        },
        {
          id: 5,
          text: "fsdf5",
        },
        {
          id: 6,
          text: "fsdf6",
        },
        {
          id: 7,
          text: "fsdf7",
        },
        {
          id: 8,
          text: "fsdf8",
        },
        {
          id: 9,
          text: "fsdf9",
        },
      ],
    };
  },
  mounted() {
    // console.log(this.$refs.myRef);
    // this.showWhat = "input";
    // 新节点没有渲染完毕，所以打印的还是上一次的节点信息
    // console.log(this.$refs.myRef);
    // this.$refs.myRef.focus();
    // 获取相应节点的信息
    // console.log(this.$refs.myRef.offsetHeight);
  },
  methods: {
    handleClick() {
      // 可以获得组件实例，使用组件方法
      console.log(this.$refs.myTest.addCount());
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
